<script setup lang="ts">
import { ref } from 'vue'
import type { ListResultData, Pagination, ResultData } from '@/api/base'
import { ElMessage } from 'element-plus'

interface filterFormObj {
  key?: string
}
const loading = ref(false)
const filterForm = ref<filterFormObj>({ key: '' })
const userData = ref({
  mode: 'config',
  data: { list: [], total: 0 },
  auto: true,
  isPager: false,
  columns: [
    { label: 'id', prop: 'id', width: '70' },
    { label: '标签名', prop: 'tagName', width: '100' },
    { label: '标签说明', prop: 'tagDesc', minWidth: '140' },
    { label: '状态', prop: 'status', slot: true, width: '90' },
    { label: '创建时间', prop: 'createDate', width: '166' },
    { label: '更新时间', prop: 'updateDate', width: '166' },
    { label: '操作', fixed: 'right', prop: 'actions', width: '166', slot: true }
  ],
  index: true
})
// 接口请求
// 说明： 设置 auto = true, callback = getUserListFn 当切换分页时，自动调用 callback 回调
const getUserListFn = async () => {
  loading.value = true
  const res = { data: [], code: 200, msg: '测试' }
  loading.value = false
  if (res.code === 200) {
    const data = res.data
    userData.value.data = { list: data, total: data.length } as ListResultData<never>
  } else {
    ElMessage({ message: res?.msg || '网络异常，请稍后重试', type: 'error' })
  }
}
</script>

<template>
  <div class="my-page-container box-bg-color">
    <div class="my-page-main">
      <div class="my-filter-form">
        <el-form :model="filterForm" inline>
          <el-form-item label="查询条件">
            <el-input v-model="filterForm.key" placeholder="标签名/描述"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="my-main-content">
        <k-table
          ref="userTableRef"
          v-bind="userData"
          :callback="getUserListFn"
          :loading="loading"
          border
          stripe
          current-row-key="id"
          style="width: 100%"
        >
          <template #status="{ row }">
            <k-badge
              :type="row.status === 1 ? 'primary' : 'danger'"
              :content="row.status === 1 ? '可用' : '不可用'"
            ></k-badge>
          </template>
          <template #actions="{ row }">
            <el-button type="primary" plain>修改</el-button>
            <el-button type="danger" plain>删除</el-button>
          </template>
        </k-table>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-page-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  .my-filter-form {
    flex: 1 1 100px;
  }
  .my-main-content {
    flex: 1 1 calc(100% - 100px);
    overflow: hidden;
    .k-table-container {
      height: 100%;
      ::v-deep(.k-table__inner) {
        height: 100%;
      }
    }
  }
}
</style>
